<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="Mosaddek">
    <meta name="keyword" content="FlatLab, Dashboard, Bootstrap, Admin, Template, Theme, Responsive, Fluid, Retina">
    <link rel="shortcut icon" href="img/favicon.html">

    <title>FlatLab - Flat & Responsive Bootstrap Admin Template</title>

    <!-- Bootstrap core CSS -->
    <link href="<?= base_url();?>assets/admin/css/bootstrap.min.css" rel="stylesheet">
    <link href="<?= base_url();?>assets/admin/css/bootstrap-reset.css" rel="stylesheet">
    <!--external css-->
    <link href="<?= base_url();?>assets/admin/css/font-awesome.css" rel="stylesheet" />
    <link href="<?= base_url();?>assets/admin/jquery-easy-pie-chart/jquery.easy-pie-chart.css" rel="stylesheet" type="text/css" media="screen"/>
    <link rel="stylesheet" href="<?= base_url();?>assets/admin/css/owl.carousel.css" type="text/css">
    <!-- Custom styles for this template -->
    <link href="<?= base_url();?>assets/admin/css/style.css" rel="stylesheet">
    <link href="<?= base_url();?>assets/admin/css/style-responsive.css" rel="stylesheet" />

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 tooltipss and media queries -->
    <!--[if lt IE 9]>
      <script src="js/html5shiv.js"></script>
      <script src="js/respond.min.js"></script>
    <![endif]-->
  </head>

  <body data-baseurl="<?= base_url(); ?>">

  <section id="container" class="">
      <!--header start-->
     <?php
		if (isset($template['partials']['nav_bar']))
			echo $template['partials']['nav_bar'];
		?>
      <!--header end-->
      <!--sidebar start-->
      	
      	<?php
			if (isset($template['partials']['side_menu']))
				echo $template['partials']['side_menu'];
			?>
      
      <!--sidebar end-->
      <!--main content start-->
      <section id="main-content">
       <?php echo $template['body'];?>
      </section>
      <!--main content end-->
  </section>
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
  
  
    <!-- js placed at the end of the document so the pages load faster -->
    <script src="<?= base_url();?>assets/admin/js/jquery.js"></script>
    <script src="<?= base_url();?>assets/admin/js/jquery-1.8.3.min.js"></script>
    <script src="<?= base_url();?>assets/admin/js/bootstrap.min.js"></script>
    <script src="<?= base_url();?>assets/admin/js/jquery.scrollTo.min.js"></script>
    <script src="<?= base_url();?>assets/admin/js/jquery.nicescroll.js" type="text/javascript"></script>
    <script src="<?= base_url();?>assets/admin/js/jquery.sparkline.js" type="text/javascript"></script>
    <script src="<?= base_url();?>assets/admin/jquery-easy-pie-chart/jquery.easy-pie-chart.js"></script>
    <script src="<?= base_url();?>assets/admin/js/owl.carousel.js" ></script>
    <script src="<?= base_url();?>assets/admin/js/jquery.customSelect.min.js" ></script>

    <!--common script for all pages-->
    <script src="<?= base_url();?>assets/admin/js/common-scripts.js" type="text/javascript"></script>

    <!--script for this page-->
    <script src="<?= base_url();?>assets/admin/js/sparkline-chart.js"></script>
    <script src="<?= base_url();?>assets/admin/js/easy-pie-chart.js"></script>

  <script>

      //owl carousel

      $(document).ready(function() {
          $("#owl-demo").owlCarousel({
              navigation : true,
              slideSpeed : 300,
              paginationSpeed : 400,
              singleItem : true

          });
      });

      //custom select box

      $(function(){
          $('select.styled').customSelect();
      });

  </script>
<script type="text/Javascript">


      $(document).ready(function(){
    	    $('#tutorstate').change(function(){ //any select change on the dropdown with id country trigger this code
    	        $("#tutorcity > option").remove(); //first of all clear select items
    	        var stateid = $('#tutorstate').val();  // here we are taking country id of the selected one.
    	       // alert(stateid);
    	         $("#tutorcity").removeAttr('disabled');
    	       
    	        var base_url = $('body').data('baseurl');
    			//alert(base_url);
    	        
    	        
    	        //var base_url = "<?php echo 'HELL'; ?>";
    	        //alert (base_url);
    	        
    	        
    	        $.ajax({
    	            type: "POST",
    	            url: base_url+"location/city/get_cities/"+stateid, //here we are calling our user controller and get_cities method with the country_id
    	            
    	            success: function(cities) //we're calling the response json array 'cities'
    	            {
    	            	var opt1 = $('<option />'); // here we're creating a new select option with for each city
    	                opt1.val(0);
    	                opt1.text("--Select City--");
    	                $('#tutorcity').append(opt1); //here we will append these new select options to a dropdown with the id 'cities'
    	                
    	            	
    	                $.each(cities,function(id,city) //here we're doing a foeach loop round each city with id as the key and city as the value
    	                {
    	                	var opt = $('<option />'); // here we're creating a new select option with for each city
    	                    opt.val(id);
    	                    opt.text(city);
    	                    $('#tutorcity').append(opt); //here we will append these new select options to a dropdown with the id 'cities'
    	                });
    	            }

    	        });

    	    });
    	});


      $(document).ready(function(){
    		$('#mymap3').show();
    		var lat = $('#lat').val();
    		var longg = $('#long').val();
    		//alert (longg);

    		var latlng = new google.maps.LatLng(lat,longg);
    		    var map = new google.maps.Map(document.getElementById('map3'), {
    		        center: latlng,
    		        zoom: 14,
    		        mapTypeId: google.maps.MapTypeId.ROADMAP
    		    });
    		    var marker = new google.maps.Marker({
    		        position: latlng,
    		        map: map,
    		        title: 'Set lat/lon values for this property',
    		        draggable: true
    		    });
    			 google.maps.event.addListener(marker, 'dragend', function(a) {
    		        console.log(a);
    		              
    				document.getElementById('lat').value = a.latLng.lat().toFixed(4);
    				document.getElementById('long').value = a.latLng.lng().toFixed(4);
    		        document.getElementsByTagName('body')[0].appendChild(div);
    		    });
    			
    		});

    	function getlattttlong() {
    		$('#mymap3').show();
    		
    		var geocoder = new google.maps.Geocoder();
    		
    		var street=$("#street_address1").val();
    		//var street2=$("#street_address2").val();
    		//var country=$("#country option:selected").html();
    		var state=$("#statediv option:selected").html();
    		var city=$("#citydiv option:selected").html();
    		
    		//var address=country+','+state+','+city+','+street;
    		var address=street+','+city+','+state;
    		
    		
    		geocoder.geocode( { 'address': address}, function(results, status) {

    		if (status == google.maps.GeocoderStatus.OK) {
    	    var latitude = results[0].geometry.location.lat();
    		var longitude = results[0].geometry.location.lng();
    		document.getElementById('lat').value=latitude;
    		document.getElementById('long').value=longitude;
    	    } 

    		
    	    var latlng = new google.maps.LatLng(latitude,longitude);
    	    var map = new google.maps.Map(document.getElementById('map3'), {
    	        center: latlng,
    	        zoom: 14,
    	        mapTypeId: google.maps.MapTypeId.ROADMAP
    	    });
    	    var marker = new google.maps.Marker({
    	        position: latlng,
    	        map: map,
    	        title: 'Set lat/lon values for this property',
    	        draggable: true
    	    });
    	    google.maps.event.addListener(marker, 'dragend', function(a) {
    	        console.log(a);
    	       
    	        
    			document.getElementById('lat').value = a.latLng.lat().toFixed(4);
    			document.getElementById('long').value = a.latLng.lng().toFixed(4);
    	        document.getElementsByTagName('body')[0].appendChild(div);
    	    });
    		}); 
    	};


    	function getlatttlong() {
    		$('#mymap2').show();
    		var geocoder = new google.maps.Geocoder();
    		
    		var street=$("#street_address1").val();
    		//var street2=$("#street_address2").val();
    		//var country=$("#country option:selected").html();
    		var state=$("#statediv option:selected").html();
    		var city=$("#citydiv option:selected").html();
    		
    		//var address=country+','+state+','+city+','+street;
    		var address=street+','+city+','+state;
    		
    		geocoder.geocode( { 'address': address}, function(results, status) {

    		if (status == google.maps.GeocoderStatus.OK) {
    	    var latitude = results[0].geometry.location.lat();
    		var longitude = results[0].geometry.location.lng();
    		document.getElementById('lat').value=latitude;
    		document.getElementById('long').value=longitude;
    	    } 

    		
    	    var latlng = new google.maps.LatLng(latitude,longitude);
    	    var map = new google.maps.Map(document.getElementById('map2'), {
    	        center: latlng,
    	        zoom: 14,
    	        mapTypeId: google.maps.MapTypeId.ROADMAP
    	    });
    	    var marker = new google.maps.Marker({
    	        position: latlng,
    	        map: map,
    	        title: 'Set lat/lon values for this property',
    	        draggable: true
    	    });
    	    google.maps.event.addListener(marker, 'dragend', function(a) {
    	        console.log(a);
    	       
    	        
    			document.getElementById('lat').value = a.latLng.lat().toFixed(4);
    			document.getElementById('long').value = a.latLng.lng().toFixed(4);
    	        document.getElementsByTagName('body')[0].appendChild(div);
    	    });
    		}); 
    	};
  </script>
  </body>
</html>
